var arr = location.search.match(/id=(\d+)/)
if (!arr) {
    layer.msg('非法访问', {
        icon: 2,
        time: 2000
    }, function () {
        location.href = "list.html"
    })
}
var id = arr[1]
$.ajax({
    url: 'php/hot.php',
    data: { id }
})


var username = getCookie('username')
if (username) {
    $('.n_left').children().eq(1).remove();
    $('.n_left').children().eq(0).after($('<b>欢迎<a href="#"style="margin:4px;">' + username + '</a>来到天猫</b>'))
    $('.n_left').children().last().remove();
    $('.n_left').children().last().after($('<a href="#">退出</a>'))
    $('.n_left').children().last().click(function () {
        var conindex = layer.confirm('你确定要退出吗', {
            btn: ['残忍离开', '依依不舍']
        }, function () {
            removeCookie("username")
            $('.n_left').children().eq(1).remove();
            $('.n_left').children().eq(0).after($('<a href="./login.html">请登录</a>'))
            $('.n_left').children().last().remove();
            $('.n_left').children().last().after($('<a href="./register.html">免费注册</a>'))
            layer.close(conindex)
        }, function () {
            layer.msg('留下来了', {
                icon: 1,
                time: 1000
            })
        })
        return false
    })
    $.ajax({
        url: 'php/history.php',
        data: {
            username,
            goodsid: id
        },
        method: 'post',
    })
    $.ajax({
        url: './php/getHistory.php',
        data: { username },
        dataType: "json",
        success: res => {
            var { data } = res;
            var data = data.sort(function (a, b) {
                return b.id - a.id
            }).slice(0, 3)
            // console.log(data)

            // 历史记录未完
            var hisId = data.map(item => item.id).join(',')
            console.log(hisId)
            $.ajax({
                url: "php/goodH.php",
                data: { hisId },
                // method:"post",
                dataType: "json",
                success(res) {
                    var { data } = res
                    console.log(data)
                    var str = `<li>
                    <img src="${data[0].img}" alt="">
                    <div>${data[0].name}</div>
                    <div>￥${data[0].price}</div>
                </li>
                <li>
                    <img src="${data[1].img}" alt="">
                    <div>${data[1].name}</div>
                    <div>￥${data[1].price}</div>
                </li>
                <li>
                <img src="${data[2].img}" alt="">
                <div>${data[2].name}</div>
                <div>￥${data[2].price}</div>
                </li>
                `;
                    $('.h_recode').html(str)
                }
            })
        }
    })

}


// 获取商品id

var loadindex = layer.load(1, {
    shade: [0.4, '#000']
})
$.ajax({
    url: 'php/list.php',
    data: { cat: 'all' },
    dataType: "json",
    success(res) {
        var { data } = res;
        data = data.sort(function (a, b) {
            return b.readnum - a.readnum
        }).slice(0, 3)
        console.log(data);
        var str = `
    <li>
        <img src="${data[0].img}" alt="">
        <div>${data[0].name}</div>
        <div>￥${data[0].price}</div>
    </li>
    <li>
        <img src="${data[1].img}" alt="">
        <div>${data[1].name}</div>
        <div>￥${data[1].price}</div>
    </li>
    <li>
    <img src="${data[2].img}" alt="">
        <div>${data[2].name}</div>
        <div>￥${data[2].price}</div>
    </li>
    `;
        $('.tuijian').html(str)


        // 爆款推荐未完
    }
})
$.ajax({
    url: 'php/detail.php',
    data: { id },
    dataType: 'json',
    success: res => {
        layer.close(loadindex)
        console.log(res);
        var { data } = res;
        $(".middle>img").attr('src', data.img)
        $(".big>img").attr('src', data.img)
        $(".small>img").attr('src', data.img)
        $('.info h2 small').text(data.name)
        $('.info p.price span').text(data.price)
        $('.tab ol li').eq(0).html(data.introduce)
        enlarge()
        tabo()
    }

})
function tabo() {
    $('.tab ul li').click(function () {

        $(this).addClass('active').siblings().removeClass('active').parent().next().children().eq($(this).index()).addClass('active').siblings().removeClass('active')
    })
}

function enlarge() {
    $('.small img').eq(0).addClass('active')

    $('.samll img').click(function () {
        $(this).addClass('active').siblings().removeclass('active')
        $('.middle>img').attr('src', $(this).attr('src'))
        $('.big>img').attr('src', $(this).attr('src'))
    })
    $('.middle').hover(function () {
        $('.middle .shade').show()
        $('.middle .big').show()
        $(this).mousemove(e => {
            var x = e.pageX;
            var y = e.pageY;
            var l = x - $('.shade').width() / 2;
            var t = y - $('.shade').height() / 2;
            if (l < $('.enlarge').offset().left) {
                l = $('.enlarge').offset().left
            }
            if (l > $('.enlarge').offset().left + $('.middle').width() - $('.shade').width()) {
                l = $('.enlarge').offset().left + $('.middle').width() - $('.shade').width()
            }
            if (t < $('.enlarge').offset().top) {
                t = $('.enlarge').offset().top
            }
            if (t > $('.enlarge').offset().top + $('.middle').height() - $('.shade').height()) {
                t = $('.enlarge').offset().top + $('.middle').height() - $('.shade').height()
            }
            $('.shade').offset({
                left: l,
                top: t
            })
            var bigLeft = $('.shade').position().left / $('.shade').width() * $('.big').width()
            var bigTop = $('.shade').position().top / $('.shade').height() * $('.big').height()
            $('.big>img').css({
                left: -bigLeft + 'px',
                top: -bigTop + 'px'
            })
        })
    }, function () {
        $('.middle .shade').hide()
        $('.middle .big').hide()
    })

}
$('.addcart').click(function () {
     username = getCookie('username')
    if (!username) {
        layer.msg('请先登录', {
            icon: 2,
            time: 1500
        }, function () {
            localStorage.setItem('url', location.href)
            location.href = 'login.html'
        })
        return false
    }


    var str = localStorage.getItem('cartData')
    if (str) {
        var arr = JSON.parse(str)

        console.log(arr);
        var data = arr.find(item => item.username === username && item.id === id)
        if (data) {
            data.number++
            localStorage.setItem('cartData', JSON.stringify(arr))
        } else {
            var obj = {
                id,
                number: 1,
                username
            }
            arr.push(obj)
            localStorage.setItem('cartData', JSON.stringify(arr))
        }
    } else {
        var obj = {
            id,
            number: 1,
            username
        }
        var arr = [];
        arr.push(obj)
        localStorage.setItem('cartData', JSON.stringify(arr))
    }

    layer.msg('购物车添加成功，请移步购物车结算', {
        icon: 1,
        time: 1500
    })

    return false;

})


